<script>
import { useUserStore} from "@/stores/user";
import * as echarts from 'echarts';

export default {
  name: "index",
  data() {
    return {
      userInfo: useUserStore().user_info,
      welcome_message: '',
      // 图表实例
      chart1: null,
      chart2: null,
      // 图表数据
      chartData1: {
        xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        series: [120, 200, 150, 80, 70, 110, 130]
      },
      chartData2: {
        legend: ['已完成', '进行中', '待开始'],
        series: [
          { value: 335, name: '已完成' },
          { value: 310, name: '进行中' },
          { value: 234, name: '待开始' }
        ]
      }
    }
  },
  mounted() {
    this.welcome_message = `欢迎回来, ${this.userInfo.first_name}`
    // 初始化图表
    this.initChart1()
    this.initChart2()
  },
  beforeUnmount() {
    // 销毁图表实例，防止内存泄漏
    if (this.chart1) {
      this.chart1.dispose()
    }
    if (this.chart2) {
      this.chart2.dispose()
    }
  },
  methods: {
    initChart1() {
      // 初始化柱状图
      const chart1Dom = document.getElementById('chart1')
      this.chart1 = echarts.init(chart1Dom)

      const option = {
        title: {
          text: '本周任务统计',
          textStyle: {
            color: '#303133',
            fontSize: 16,
            fontWeight: 'normal'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.chartData1.xAxis,
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                color: '#909399'
              }
            },
            axisLabel: {
              color: '#606266'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#909399'
              }
            },
            axisLabel: {
              color: '#606266'
            },
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
          }
        ],
        series: [
          {
            name: '任务数量',
            type: 'bar',
            barWidth: '60%',
            data: this.chartData1.series,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#409EFF' },
                { offset: 1, color: '#27425e' }
              ])
            }
          }
        ]
      }

      this.chart1.setOption(option)
    },
    initChart2() {
      // 初始化饼图
      const chart2Dom = document.getElementById('chart2')
      this.chart2 = echarts.init(chart2Dom)

      const option = {
        title: {
          text: '任务状态分布',
          textStyle: {
            color: '#303133',
            fontSize: 16,
            fontWeight: 'normal'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: 'bottom',
          data: this.chartData2.legend
        },
        series: [
          {
            name: '任务状态',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '14',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.chartData2.series,
            color: ['#67C23A', '#E6A23C', '#909399']
          }
        ]
      }

      this.chart2.setOption(option)
    }
  }
}
</script>

<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="welcome-card">
          <div class="welcome-content">
            <div class="welcome-text">
              <h1 class="welcome-title">{{ welcome_message }}</h1>
              <p class="join-info">这是您加入的第 {{ userInfo.days_since_joined }} 天</p>
              <p class="motivational-message">每一天都是新的开始，继续加油！</p>
            </div>
            <div class="welcome-icon">
              <i class="el-icon-user-solid" style="font-size: 48px; color: #409EFF;"></i>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 统计卡片 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-content">
            <i class="el-icon-document" style="font-size: 24px; color: #409EFF;"></i>
            <div class="stat-text">
              <p class="stat-number">12</p>
              <p class="stat-label">待处理任务</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-content">
            <i class="el-icon-check" style="font-size: 24px; color: #67C23A;"></i>
            <div class="stat-text">
              <p class="stat-number">8</p>
              <p class="stat-label">已完成任务</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-content">
            <i class="el-icon-star-off" style="font-size: 24px; color: #E6A23C;"></i>
            <div class="stat-text">
              <p class="stat-number">95%</p>
              <p class="stat-label">完成率</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card class="chart-card">
          <div id="chart1" style="width: 100%; height: 300px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="chart-card">
          <div id="chart2" style="width: 100%; height: 300px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 课程日历 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card class="calendar-card">
          <template #header>
            <div class="calendar-header">
              <span>课程日历</span>
            </div>
          </template>
          <el-calendar>
            <template #dateCell="{data}">
              <div class="calendar-day">
                <div class="calendar-date">{{ data.day.split('-')[2] }}</div>
                <div class="calendar-events">
                  <!-- 这里可以根据实际数据渲染课程事件 -->
                  <div v-if="data.day === new Date().toISOString().split('T')[0]" class="calendar-event today">今日课程</div>
                  <div v-if="data.day.slice(-1) % 3 === 0" class="calendar-event">数学课</div>
                  <div v-if="data.day.slice(-1) % 5 === 0" class="calendar-event">英语课</div>
                </div>
              </div>
            </template>
          </el-calendar>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.dashboard-container {
  padding: 20px;
  min-height: calc(100vh - 50px);
  background-color: #f0f2f5;
}

.welcome-card {
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  /* 使用与Layout组件相匹配的渐变色 */
  background: linear-gradient(135deg, #244c72 0%, #27425e 100%);
  color: white;
  border: none;
}

.welcome-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.welcome-text {
  flex: 1;
}

.welcome-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 10px;
}

.join-info {
  font-size: 18px;
  margin-bottom: 5px;
}

.motivational-message {
  font-size: 14px;
  opacity: 0.9;
}

.welcome-icon {
  padding: 20px;
}

.chart-card,
.calendar-card {
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: none;
  background-color: #fff;
}

.calendar-header {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.stat-card {
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: none;
  background-color: #fff;
}

.stat-content {
  display: flex;
  align-items: center;
}

.stat-text {
  margin-left: 15px;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
  color: #303133;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin: 0;
}

/* 日历样式定制 */
.calendar-day {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.calendar-date {
  align-self: flex-end;
}

.calendar-events {
  flex: 1;
  overflow: hidden;
}

.calendar-event {
  font-size: 12px;
  margin-top: 2px;
  padding: 2px 4px;
  border-radius: 2px;
  background-color: #ecf5ff;
  color: #409eff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-event.today {
  background-color: #e6f7ff;
  border-left: 3px solid #409eff;
}

:deep(.el-calendar) {
  border: none;
}

:deep(.el-calendar__header) {
  border-bottom: none;
  padding-bottom: 0;
}

:deep(.el-calendar__body) {
  padding: 10px 0;
}

:deep(.el-calendar-table .el-calendar-day) {
  height: 80px;
}

:deep(.el-calendar-table .today .el-calendar-day) {
  background-color: transparent;
}
</style>
